<template>
    <n-card title="个人信息" size="small" :segmented="{ content: true, footer: 'soft' }" content-style="display: flex; flex-direction: column; align-items: center;">
        <n-avatar round :size="100" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"></n-avatar>
        <n-divider/>
        <n-table :bordered="false" size="small">
            <tbody>
                <tr>
                    <td>账号</td>
                    <td>{{ user.username }}</td>
                </tr>
                <tr>
                    <td>昵称</td>
                    <td>{{ user.nickname }}</td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>{{ user.gender }}</td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>{{ user.birthday }}</td>
                </tr>
                <tr>
                    <td>手机</td>
                    <td>{{ user.phone }}</td>
                </tr>
                <tr>
                    <td>邮箱</td>
                    <td>{{ user.email }}</td>
                </tr>
                <tr>
                    <td>创建人</td>
                    <td>{{ user.creator }}</td>
                </tr>
                <tr>
                    <td>创建日期</td>
                    <td>{{ user.gmtCreate }}</td>
                </tr>
                <tr>
                    <td>修改人</td>
                    <td>{{ user.modifier }}</td>
                </tr>
                <tr>
                    <td>修改日期</td>
                    <td>{{ user.gmtModified }}</td>
                </tr>
            </tbody>
        </n-table>
    </n-card>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
const user = userStore.userInfo

</script>
<style lang="scss" scoped>
tr>td:nth-child(2){
    text-align: right;
}
.n-divider{
    margin: 12px 0 0 0;
}
</style>